
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: StyleSheet: Adjusting a page theme on the fly</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">

<!--there is no custom header content for this example-->

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>

</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: StyleSheet: Adjusting a page theme on the fly</h1></div>
</div>
<div id="bd">

	<div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div>

	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>StyleSheet: Adjusting a page theme on the fly</h2>

	<div id="example" class="promo">
	<p>
	<p>In this example, we'll change some colors in this page's color theme.  Enter any valid CSS color value into the inputs and submit the changes to see them applied to the page.</p>
	</p>	

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="stylesheet_theme_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<div id="demo">
    <form id="demo_form" action="#" method="get">
        <fieldset>
            <p>Example values: #123456 or #123 or rgb(0,10,30) or red</p>
            <label for="demo_headings">Headings and labels</label>
                <input type="text" size="7" id="demo_headings" value="#e76300">
            <pre><code>h1,h2,h3,h4,h5,h6,
#demo label {
    color: <em id="demo_heading_value">#e76300</em>;
}</code></pre>

            <label for="demo_bg">Demo background</label>
                <input type="text" size="7" id="demo_bg" value="#F1F6F7">
            <pre><code>.example-container {
    background-color: <em id="demo_background_value">#F1F6F7</em>;
}</code></pre>
            <label for="demo_hover">Left nav hover color</label>
                <input type="text" size="7" id="demo_hover" value="#28b">
            <pre><code>#bd .toc3 li.selected a,
#bd .toc3 li a:hover {
    color: <em id="demo_hover_value">#28b</em>;
}</code></pre>

        </fieldset>
        <p>
            <input type="submit" id="update" value="Update theme">
        </p>
    </form>
</div>

<script type="text/javascript">

//Create a new YUI instance, requiring node and stylesheet
YUI({base:"../../build/", timeout: 10000}).use("node", "stylesheet", function (Y) {
	
	var Demo = {};
	
	//We need a validator to make sure we're not trying to set
	//invalid color values in StyleSheet:
	Demo.isValidColor = function (v) {
			return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) ||
				   /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) ||
				   /^[a-z]+$/i.test(v);
	}

	//When the DOM is ready, we'll initialize the example,
	//creating our StyleSheet instance and adding our event 
	//listeners:
    Demo.init = function () {
	
        // Create a new StyleSheet instance for us to override some current
        // page styles.  For illustration, we'll seed it with the CSS to 
		// style the demo form.  Note that you wouldn't want to use this 
		// as a standard technique; the initial styling of your content
		// should come from .css files included in link elements.  However,
		// this block of code illustrates how a block of style information
		// can be applied to the page on demand:
        Demo.theme = Y.StyleSheet("\
            #demo form,\
            #demo fieldset {\
                border: none; padding: 0; margin: 0;\
            }\
            #demo fieldset p {\
                background: #fff;\
                border: 1px solid #ccc;\
                padding: 1em 1ex;\
            }\
            #demo pre code {\
                background: #fff;\
                border: 1px solid #ccc;\
                color: #555;\
                display: block;\
                font-weight: normal;\
                margin: 1ex 0 1em;\
                padding: 1ex;\
            }\
            #demo label {\
                font-weight: bold;\
                color: #e76300;\
            }\
            #demo pre code em {\
                color: #000;\
                font-weight: bold;\
            }\
        ");

        // Store Node references for the input fields for value retrieval
        Demo.headings   = Y.get('#demo_headings');
        Demo.background = Y.get('#demo_bg');
        Demo.hover      = Y.get('#demo_hover');

        // Set up the submit handler to update the page styles and to
		// prevent the default action of the form:
        Y.on('submit', function (e) {
            e.halt();
            Demo.update();
        }, '#demo_form');
		
		//Log a message that the example is ready:
		Y.log("The example has been initialized.", "info", "example");
    }

	//The event handler that process changes in the form field
	//values.  Each time the form is submitted, we check the 
	//validity of the submitted values and, if valid, apply
	//them using our StyleSheet instance.
    Demo.update = function () {
	
        var v = Y.Lang.trim(Demo.headings.get("value"));
        if (Demo.isValidColor(v)) {
            // multiple selectors are delimited by commas
            Demo.theme.set('h1,h2,h3,h4,h5,h6, #demo label', { color : v });
            Y.get('#demo_heading_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for headings was not valid.", "info", "example");
		}

        v = Y.Lang.trim(Demo.background.get("value"));
        if (Demo.isValidColor(v)) {
            // use camelCase for style property names
            Demo.theme.set('.example-container', { backgroundColor : v });
            Y.get('#demo_background_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for background was not valid.", "info", "example");
		}

        v = Y.Lang.trim(Demo.hover.get("value"));
        if (Demo.isValidColor(v)) {
            Demo.theme.set(
                '#bd .toc3 li.selected a,'+
                '#bd .toc3 li a:hover', { color : v });

            Y.get('#demo_hover_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for hover color was not valid.", "info", "example");
		}

		//Log a message that the update was processed fully:
		Y.log("The stylesheet has been updated.", "info", "example");

    }

	// Initialize the example when the DOM is ready
	Y.on("domready", Demo.init);

});
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
	</div>			
	</div>
		
	<h3 class="first">Full code listing</h3>
<h4 id="markup">Markup</h4>

<textarea name="code" class="HTML" rows="1" cols="60">
<div id="demo">
    <form id="demo_form" action="#" method="get">
        <fieldset>
            <p>Example values: #123456 or #123 or rgb(0,10,30) or red</p>
            <label for="demo_headings">Headings and labels</label>
                <input type="text" size="7" id="demo_headings" value="#e76300">
            <pre><code>h1,h2,h3,h4,h5,h6,
#demo label {
    color: <em id="demo_heading_value">#e76300</em>;
}</code></pre>

            <label for="demo_bg">Demo background</label>
                <input type="text" size="7" id="demo_bg" value="#F1F6F7">
            <pre><code>.example-container {
    background-color: <em id="demo_background_value">#F1F6F7</em>;
}</code></pre>
            <label for="demo_hover">Left nav hover color</label>
                <input type="text" size="7" id="demo_hover" value="#28b">
            <pre><code>#bd .toc3 li.selected a,
#bd .toc3 li a:hover {
    color: <em id="demo_hover_value">#28b</em>;
}</code></pre>

        </fieldset>
        <p>
            <input type="submit" id="update" value="Update theme">
        </p>
    </form>
</div>
</textarea>

<h4>JavaScript</h4>

<textarea name="code" class="JScript" rows="1" cols="60">
// Create a new YUI instance, requiring node and stylesheet
YUI({base:"../../build/", timeout: 10000}).use("node", "stylesheet", function (Y) {
	
	var Demo = {};
	
	//We need a validator to make sure we're not trying to set
	//invalid color values in StyleSheet:
	Demo.isValidColor = function (v) {
			return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) ||
				   /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) ||
				   /^[a-z]+$/i.test(v);
	}

	//When the DOM is ready, we'll initialize the example,
	//creating our StyleSheet instance and adding our event 
	//listeners:
    Demo.init = function () {
	
        // Create a new StyleSheet instance for us to override some current
        // page styles.  For illustration, we'll seed it with the CSS to 
		// style the demo form.  Note that you wouldn't want to use this 
		// as a standard technique; the initial styling of your content
		// should come from .css files included in link elements.  However,
		// this block of code illustrates how a block of style information
		// can be applied to the page on demand:
        Demo.theme = Y.StyleSheet("\
            #demo form,\
            #demo fieldset {\
                border: none; padding: 0; margin: 0;\
            }\
            #demo fieldset p {\
                background: #fff;\
                border: 1px solid #ccc;\
                padding: 1em 1ex;\
            }\
            #demo pre code {\
                background: #fff;\
                border: 1px solid #ccc;\
                color: #555;\
                display: block;\
                font-weight: normal;\
                margin: 1ex 0 1em;\
                padding: 1ex;\
            }\
            #demo label {\
                font-weight: bold;\
                color: #e76300;\
            }\
            #demo pre code em {\
                color: #000;\
                font-weight: bold;\
            }\
        ");

        // Store Node references for the input fields for value retrieval
        Demo.headings   = Y.get('#demo_headings');
        Demo.background = Y.get('#demo_bg');
        Demo.hover      = Y.get('#demo_hover');

        // Set up the submit handler to update the page styles and to
		// prevent the default action of the form:
        Y.on('submit', function (e) {
            e.halt();
            Demo.update();
        }, '#demo_form');
		
		//Log a message that the example is ready:
		Y.log("The example has been initialized.", "info", "example");
    }

	//The event handler that process changes in the form field
	//values.  Each time the form is submitted, we check the 
	//validity of the submitted values and, if valid, apply
	//them using our StyleSheet instance.
    Demo.update = function () {
	
        var v = Y.Lang.trim(Demo.headings.get("value"));
        if (Demo.isValidColor(v)) {
            // multiple selectors are delimited by commas
            Demo.theme.set('h1,h2,h3,h4,h5,h6, #demo label', { color : v });
            Y.get('#demo_heading_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for headings was not valid.", "info", "example");
		}

        v = Y.Lang.trim(Demo.background.get("value"));
        if (Demo.isValidColor(v)) {
            // use camelCase for style property names
            Demo.theme.set('.example-container', { backgroundColor : v });
            Y.get('#demo_background_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for background was not valid.", "info", "example");
		}

        v = Y.Lang.trim(Demo.hover.get("value"));
        if (Demo.isValidColor(v)) {
            Demo.theme.set(
                '#toc ul li.selected a,'+
                '#toc ul li a:hover', { color : v });

            Y.get('#demo_hover_value').set("innerHTML", v);
        } else {
			Y.log("The value submitted for hover color was not valid.", "info", "example");
		}

		//Log a message that the update was processed fully:
		Y.log("The stylesheet has been updated.", "info", "example");

    }

	// Initialize the example when the DOM is ready
	Y.on("domready", Demo.init);

});
</textarea>
				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    StyleSheet Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li class='selected'><a href='../stylesheet/stylesheet_theme.html'>Adjusting a page theme on the fly</a></li><li><a href='../dd/photo-browser.html'>Photo Browser (included with examples for Drag &amp; Drop)</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More StyleSheet Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/stylesheet/">User's Guide</a> (external)</li> -->
						<li><a href="../../api/module_stylesheet.html">API Documentation</a></li>
</ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema</a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource</a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType</a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="selected "><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay</a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin</a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console</a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2009 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
